<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view v-if="nav" :style="'height:' + nav + 'px;'"></view>
		<view class="next" @click="save()">
			<text>跳过</text>
		</view>
		<view class="chose">选择您的性别</view>
		<view class="pic">
			<image :src="`${setting.sImgUrl}/man.png`" v-if="sex == 0"></image>
			<image :src="`${setting.sImgUrl}/woman.png`" v-else></image>
			<view class="right">
				<view class="man">
					<text :class="sex == 0 ? 'active' : ''" @click="chose(0)">男士</text>
				</view>
				<view>
					<text :class="sex == 1 ? 'active' : ''" @click="chose(1)">女士</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<text @click="save()">下一步</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sex: 0,
			nav: ''
		};
	},
	methods: {
		chose(type) {
			this.sex = type;
		},
		save() {
			uni.setStorageSync('sex', this.sex)
			uni.navigateTo({
				url: '/pages/student/guide/score'
			});
		}
	},
	onLoad(e) {
		uni.getStorage({
			key: 'sex',
			success:res => {
				this.sex = res.data;
			}
		});
		this.sex = parseInt(uni.getStorageSync('sex') || 0)
		// #ifdef MP-WEIXIN
		this.nav = uni.getMenuButtonBoundingClientRect().height;
		// #endif
	},
};
</script>

<style>
.next {
	margin-right: 40rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: flex-end;
}
.next text {
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #585c66;
}
.chose {
	margin-top: 56rpx;
	text-align: center;
	font-size: 48rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1a2233;
}
.pic {
	display: flex;
}
image {
	width: 520rpx;
	height: 968rpx;
}
.man {
	margin: 208rpx 0 80rpx 0;
}
.right text {
	display: inline-block;
	text-align: center;
	line-height: 152rpx;
	width: 152rpx;
	height: 152rpx;
	background: #f0f2f5;
	border-radius: 24rpx;
	font-size: 36rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #585c66;
}
.right .active {
	color: #ffffff;
	background: #00ab64;
}
.btn {
	padding: 156rpx 0 108rpx 0;
	display: flex;
	justify-content: center;
}
.btn text {
	width: 640rpx;
	height: 80rpx;
	background: #00ab64;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
